<!-- 在线问诊 -->
<template>
  <div class="zxwz Pd-T60">
    <div class="container ">
      <!--标语-->
      <div class="floor_title_box">
        <i class="floor_title_icon Mg-R10"></i>
        <p class="floor_title Mg-R10">在线问诊</p>
        <span class="floor_title_info">极速问诊、精准就医（问诊费用由医生自行设定，平台不收取任何额外费用）</span>
      </div>
      <!--内容部分-->
      <div class="zxwz_content">
        <!--导航-->
        <el-tabs v-model="ActiveName" @tab-click="handleClick">
          <el-tab-pane
            :label="list.title"
            :name="list.id"
            v-for="(list,index) in TabList"
            :key="index"
            :stretch="false"
          >
            <div class="doctor_list_box">
              <el-row :gutter="30" tag="ul">
                <el-col
                  :span="6"
                  tag="li"
                  v-for="(doctor,key) in list.DoctorData"
                  v-if="key<4"
                  :key="key"
                >
                  <div class="doctor_content">
                    <!--头像-->
                    <div class="doctor_photo Mg-B20"><img :src="doctor.picture" alt=""></div>
                    <!--名字-->
                    <div class="doctor_name Mg-B20" v-text="doctor.true_name"></div>
                    <!--职称-->
                    <div class="doctor_level Mg-B20">主任医师 教授</div>
                    <!--医院-->
                    <div class="hospital_name">
                      <p>{{doctor.hospital_name}}</p>
                      <span class="hospital_level">三甲</span>
                    </div>
                    <hr class="Mg-B20 Mg-T20">
                    <!--擅长-->
                    <div class="doctor_expertise Overflow2 Mg-B20">
                      擅长疾病：{{doctor.expertise}}
                    </div>
                    <!--问诊按钮-->
                    <div
                      class="doctor_btn"
                    >图文问诊
                    </div>
                    <div class="doctor_btn doctor_price">{{doctor.ask_price}}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="consultation">
              <div class="base_list">
                <div class="question Mg-B30">
                  <div class="photo Mg-R10"><img src="../../common/img/index/pic_tx_hz.png" alt=""></div>
                  <div class="info">
                    <div class="personnel_info">
                      <span class="Color_black Ft-S14">王**</span>
                      <i class="icon_sex_nv"></i>
                      <span>24岁</span>
                    </div>
                    <div class="time">2018-08-28</div>
                  </div>
                  <div class="demarcation_line"></div>
                  <div class="question_content">医生请问服用阿莫西林有什么需要注意的吗？</div>
                </div>
                <div class="answer">
                  <div class="photo Mg-R10"><img src="../../common/img/index/pic_tx_ys.png" alt=""></div>
                  <div class="info Mg-R30">
                    <div class="personnel_info">
                      <span class="Color_black Ft-S14">陈亚楠</span>
                      <i class="icon_sex_nv"></i>
                      <span>主任医师</span>
                    </div>
                    <div class='address'>北京市北京大学附属医院</div>
                  </div>
                  <div class="answer_content">
                    <span class="Ft-S14 Color_black">您好，很高兴为您解答，关于阿莫西林的用途想必您也是知道的，阿莫西林，又名安莫西林莫西林或安默西林，是一种最常用的半合成青霉素
                      类广谱β-内酰哈萨UI电话胺类抗...</span>
                    <a href="javascript:void(0)" class="Ft-S14 Color_blue">【详情】</a>
                  </div>
                </div>
              </div>
              <div class="base_list">
                <div class="question Mg-B30">
                  <div class="photo Mg-R10"><img src="../../common/img/index/pic_tx_hz.png" alt=""></div>
                  <div class="info">
                    <div class="personnel_info">
                      <span class="Color_black Ft-S14">王**</span>
                      <i class="icon_sex_nv"></i>
                      <span>24岁</span>
                    </div>
                    <div class="time">2018-08-28</div>
                  </div>
                  <div class="demarcation_line"></div>
                  <div class="question_content">医生请问服用阿莫西林有什么需要注意的吗？</div>
                </div>
                <div class="answer">
                  <div class="photo Mg-R10"><img src="../../common/img/index/pic_tx_ys.png" alt=""></div>
                  <div class="info Mg-R30">
                    <div class="personnel_info">
                      <span class="Color_black Ft-S14">陈亚楠</span>
                      <i class="icon_sex_nv"></i>
                      <span>主任医师</span>
                    </div>
                    <div class='address'>北京市北京大学附属医院</div>
                  </div>
                  <div class="answer_content">
                    <span class="Ft-S14 Color_black">您好，很高兴为您解答，关于阿莫西林的用途想必您也是知道的，阿莫西林，又名安莫西林莫西林或安默西林，是一种最常用的半合成青霉素
                      类广谱β-内酰哈萨UI电话胺类抗...</span>
                    <a href="javascript:void(0)" class="Ft-S14 Color_blue">【详情】</a>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <p class="Ft-S14 Color_gray6 more Mg-L40 zxwz_more">更多</p>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'Zxwz',
    data() {
      return {
        ActiveName: '男科',//在线问诊默认激活
        TabList: [
          {
            title: '男科',
            id: '男科',
            DoctorData: [
              {
                "did": 100,
                "true_name": "王玉新",
                "grade": 3,
                "ask_price": "10.00",
                "picture": "https://www.yunyikang.cn/upload/doctor/15329405312242.jpg",
                "hospital_name": '济南市第三人民医院',
                "expertise": "胃病、过敏性鼻炎、消化系、过敏性皮炎"
              },
              {
                "did": 94,
                "true_name": "刘晶晶",
                "grade": 3,
                "ask_price": "200.00",
                "picture": "https://www.yunyikang.cn/upload/doctor/15328671779721.png",
                "hospital_name": '济南市第三人民医院',
                "expertise": "胃病、过敏性鼻炎、消化系、过敏性皮炎"
              },
              {
                "did": 95,
                "true_name": "马慧聪 ",
                "grade": 2,
                "ask_price": "100.00",
                "picture": "https://www.yunyikang.cn/upload/doctor/15329161559990.png",
                "hospital_name": '济南市第三人民医院',
                "expertise": "胃病、过敏性鼻炎、消化系、过敏性皮炎"
              },
              {
                "did": 96,
                "true_name": "王爱华",
                "grade": 2,
                "ask_price": "0.10",
                "picture": "https://www.yunyikang.cn/upload/doctor/15329392221536.jpg",
                "hospital_name": '济南市第三人民医院',
                "expertise": "胃病、过敏性鼻炎、消化系、过敏性皮炎"
              },
            ],
          },
          {
            title: '妇产科',
            id: '妇产科',
            DoctorData: [
              {
                  "did": 100,
                    "true_name": "王玉新",
                    "grade": 3,
                    "ask_price": "10.00",
                    "picture": "https://www.yunyikang.cn/upload/doctor/15329405312242.jpg",
                    "hospital_name": '济南市第三人民医院',
                    "expertise": "胃病、过敏性鼻炎、消化系、过敏性皮炎"
                  },
              {
                "did": 96,
                "true_name": "王爱华",
                "grade": 2,
                "ask_price": "0.10",
                "picture": "https://www.yunyikang.cn/upload/doctor/15329392221536.jpg",
                "hospital_name": '济南市第三人民医院',
                "expertise": "胃病、过敏性鼻炎、消化系、过敏性皮炎"
              },
            ],
          },
          {
            title: '儿科',
            id: '儿科',
            DoctorData: [],
          },
          {
            title: '眼科',
            id: '眼科',
            DoctorData: [],
          },
          {
            title: '耳鼻喉科',
            id: '耳鼻喉科',
            DoctorData: [],
          },
          {
            title: '口腔科',
            id: '口腔科',
            DoctorData: [],
          },
          {
            title: '皮肤科',
            id: '皮肤科',
            DoctorData: [],
          },
          {
            title: '呼吸内科',
            id: '呼吸内科',
            DoctorData: [],
          },
        ]//问诊医生数据
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab);
        console.log(event);
      },
    },
    computed: {}
  }
</script>
<style>
  .zxwz .el-tabs__header {
    margin: 0;
  }

  .zxwz .el-tabs__nav-scroll {
    padding: 0 20px;
  }

  .zxwz .el-tabs__item {
    width: 70px;
    height: 36px;
    padding: 0;
    margin: 0;
    text-align: center;
    border: 1px solid transparent;
  }

  .zxwz .el-tabs__item.is-active {
    border-left: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid transparent;
    /*border-bottom-color:transparent;*/
    background: #fff;
  }

  .zxwz .el-tabs__active-bar {
    display: none;
  }

  .zxwz .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e6e6e6;
  }
</style>
<style scoped>
  .zxwz .floor_title_icon {
    background-image: url("../../common/img/index/floor_icon_zxwz.png");
  }

  /*容器部分*/
  .zxwz_content {
    width: 100%;
    height: 980px;
    padding: 30px;
    border: 1px solid #E6E6E6;
    border-top: 2px solid #128DFF;
    margin-top: 20px;
    position: relative;
  }

  /*更多*/
  .zxwz_more {
    position: absolute;
    right: 30px;
    top: 40px;
    display: inline-block;
  }

  .el-tabs {
    height: 100%;
  }

  /*医生展示列表*/
  .doctor_list_box {
    padding: 40px 0;
  }

  .doctor_list_box ul,
  .doctor_list_box li {
    min-height: 400px;
    max-height: 400px;
  }

  .doctor_list_box li .doctor_content {
    height: 100%;
    padding: 40px 30px 20px;
    border: 1px solid rgba(230, 230, 230, 1);
    cursor: pointer;
  }

  .doctor_list_box li .doctor_content:hover {
    box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, .1);
  }

  /*头像*/
  .doctor_content .doctor_photo {
    text-align: center;
  }

  .doctor_content .doctor_photo img {
    width: 88px;
    height: 88px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }

  /*名字*/
  .doctor_content .doctor_name {
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    text-align: center;
  }

  /*职称*/
  .doctor_content .doctor_level {
    font-size: 14px;
    color: rgba(102, 102, 102, 1);
    text-align: center;
  }

  /*医院*/
  .doctor_content .hospital_name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .doctor_content .hospital_name > p {
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    margin-right: 10px;
  }

  hr {
    height: 1px;
    border: none;
    border-top: 1px dashed #e6e6e6;
  }

  /*擅长疾病*/
  .doctor_content .doctor_expertise {
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    line-height: 1.5;
  }

  /*图文问诊*/
  .doctor_content .doctor_btn {
    width: 100%;
    height: 34px;
    border: 1px solid rgba(18, 141, 255, 1);
    border-radius: 4px;
    font-size: 16px;
    color: rgba(18, 141, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .doctor_list_box li:hover .doctor_content .doctor_btn{
    display: none;
  }
  .doctor_list_box li:hover .doctor_content .doctor_price{
    display: flex;
  }
  .doctor_content .doctor_price {
    background: rgba(18, 141, 255, 1);
    color: #fff;
    display: none;
  }

  /*问答*/
  .base_list {
    padding: 30px 0;
    border-top: 1px dashed #E6E6E6;
  }

  .base_list > div {
    display: flex;
    justify-content: flex-start;
  }

  .base_list photo > img {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }

  .question {
    align-items: center;
  }

  .question .question_content {
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
  }

  .question .demarcation_line {
    height: 30px;
    width: 1px;
    background-color: #e6e6e6;
    margin: 0 30px;
  }

  .base_list .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #666;
    font-size: 12px;
    line-height: 1.5;
  }

  .base_list .info .personnel_info {
    display: flex;
    align-items: center;
  }

  .base_list .info i {
    display: block;
    width: 14px;
    height: 14px;
    background: url("../../common/img/icon/sex.png") no-repeat;
    background-size: cover;
    margin: 0 5px;

  }

  .base_list .info i.icon_sex_nv {
    background-position: -14px 0;
  }

  .base_list .info i.icon_sex_nan {
    background-position: 0 0;
  }

  .answer {
    align-items: flex-start;
  }

  .answer .answer_content {
    width: 926px;
    height: 80px;
    padding: 20px 30px;
    background: rgba(245, 245, 245, 1);
    border-radius: 0px 20px 20px 20px;
    line-height: 20px;
  }
</style>
